<template>
  <div class="chart-wrapper" ref="funnelChart"></div>
</template>

<script setup>
import echarts from 'echarts'
import { onMounted, onBeforeUnmount, ref, watch, computed } from 'vue'
import { debounce } from '@/utils/index.js'
import { color } from 'echarts/lib/export'

const funnelChart = ref(null)
let myChart = ref(null)
const props = defineProps({
  percentageForm: {
    type: Array,
    default: []
  }
})
const resizeHandler = debounce(() => {
  if (myChart) {
    myChart.resize()
  }
}, 200)
const percentageForm1 = computed({
  get: () => props.percentageForm,
  set: (val) => {}
})
watch(
  percentageForm1,
  () => {
    console.log('触发侦听1', percentageForm1.value)
    if (percentageForm1.value.length > 0) {
      dataEcharts.value = percentageForm1.value.map((item) => {
        return {
          value: item.count,
          name: { 1: '一般隐患', 2: '严重隐患', 3: '较大隐患', 4: '重大隐患' }[
            Number(item.yhdj)
          ],
          itemStyle: {
            color: { 1: '#2385FF', 2: '#FAC858', 3: '#FB8451', 4: '#FF584F' }[
              Number(item.yhdj)
            ]
          }
        }
      })
      initEcharts()
      // arr.forEach((item) => {

      // })
    }
  },
  // 设置 immediate 选项
  {
    immediate: true
  }
)
onMounted(() => {
  // getBoxData()
  window.addEventListener('resize', resizeHandler)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
})

// //模拟接口,获取echarts数据
const getBoxData = async () => {
  // const { data } = await selectBoxChartData({
  //   abcode,
  //   year,
  // });

  initEcharts()
}
const dataEcharts = ref([])
//渲染echarts图
const initEcharts = () => {
  console.log(dataEcharts.value)
  myChart = echarts.init(funnelChart.value)
  myChart.setOption(
    {
      title: {
        text: '隐患占比',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          fontSize: 20,
          color: ['#343434']
        }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '5%',
        icon: 'circle'
      },
      series: [
        {
          name: '隐患等级数据',
          type: 'pie',
          radius: ['30%', '40%'],
          // avoidLabelOverlap: false,
          // label: {
          //   show: false,
          //   position: 'center'
          // },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true,
            lineStyle: {
              color: '#D8D8D8',
              width: 1
            }
          },
          data: dataEcharts.value
        }
      ]
    },
    true
  )

  // myChart.off("click");
  // myChart.on("click", () => {
  //   routerChange("/more");
  // });
}
</script>
